<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html style="height: 100%" lang="en">
<base href="<%=basePath%>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>手机群录</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/base.js"></script>
    <script src="js/common.js"></script>
    <script src="js/handle.js"></script>
    <script type="text/javascript" src="js/libs/hiSlider/jquery.hiSlider.js"></script>
    <script type="text/javascript" src="js/ask.js"></script>
    <link rel="stylesheet" href="js/libs/hiSlider/jquery.hiSlider.css">
    <style type="text/css">
        .rech_topbox {
            padding: 20px 20px 0 20px;
        }

        .hiSlider {
            overflow: hidden;
            width: 500px;
            max-height: 262px;
            /*min-height: 150px;*/
            background: #fff;
        }

        .hiSlider-item {
            float: left;
            width: 100%;
            max-height: 100%;
        }

        .wrap {
            overflow: hidden;
            padding-bottom: 0px;
        }

        .rech_bodybox h5 {
            color: rgba(107, 93, 55, 0.78);
        }
    </style>
</head>
<body class="">
<div class="wrap">
    <div class="banner">
        <ul class="hiSlider" id="detailPicSlider"></ul>
    </div>
    <div class="rech_topbox">
        <div id="info"></div>
        <p></p>
        <h1>
			<span class='rech_balance' id="transferVpl">
                MobileGroup
            </span>
        </h1>
        <p>开发时间</p>
        <h2 id="transferCardNo">2017/04-2018/05</h2>
        <div class="rech_bodybox" style="text-align: left" id="ajaxH5">
            <h3>功能</h3>
            <h5>可查看所在组织信息信息</h5>
            <h5>可查看所在组织中公告信息</h5>
            <h5>可输入姓名快速查找电话</h5>
            <h5>可关注公共组织并查看电话</h5>
            <h5>可使用学号、邮箱、电话等信息登录</h5>
            <h5>可实时接受管理员推送的微信模板消息</h5>
            <h5>手机群录,致力于团体之间成员的通讯信息的在线管理、查找、分享,让你轻松找到那个她</h5>
        </div>
        <div class="rate_head" style="margin:30px 0 10px 0;text-align: center ">
            <img src=""
                 style="width:150px;height: 150px;" id="wechatQr">
            <img src=""
                 style="width:150px;height: 150px;" id="appQr">
            <p style="color:#989898;font-size: 10px;line-height: 20px">
                点击并长按识别图片
                <br>关注手机群录微信公众号或体验微信小程序
            </p>
        </div>
        <div class="rech_bodybox">
            <h5>电脑访问 http://mp.haois.me 查看更多信息</h5>
        </div>
    </div>
</div>
<div class="mask_layer none"></div>
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none"></div>
<div class="loading" style="display:none">
    <img src="img/loading.gif"></div>
<script type="text/javascript">

    var result = {
        "respCode": "00",
        "object": {
            "picture": "http://111.231.253.134/static/common/img/share_log.png;http://111.231.253.134/static/common/img/share_log2.png",
        },
        "msg": "success"
    };
    $(function () {
        $("#wechatQr").attr("src", $.httpStaticPath() + 'common/img/qr/wechatQr_test.png')
        $("#appQr").attr("src", $.httpStaticPath() + 'common/img/qr/appQr_mini_12.jpg')
        drawProductDetail(result);
        $('#detailPicSlider').hiSlider({
            isFlexible: true, // 宽度自适应
            isShowControls: false, //是否显示分页按钮
            isAuto: false, //是否自动播放
            isShowTitle: false //是否显示标题栏
        });
    })

    function drawProductDetail(r) {
        var res = r.object;
        var picArray = res.picture.replace(/\s/, '').split(";");
        var objp = getParameter("hiSlider");
        if (objp != "") {
            picArray = objp.picture;
        }
        // 轮播图
        for (var i = 0; i < picArray.length; i++) {
            var p2 = "<li class='hiSlider-item'>";
            p2 += "<img src='" + picArray[i] + "'></li>";
            $("#detailPicSlider").append(p2);
        }
    }
</script>
<script type="text/javascript">
    drawInfo(getParameter("wechat"));

    function drawInfo(data) {
        if (data == "") {
            return;
        }
        if (data.length > 0) {
            var innerText = "  <h3>功能</h3>";
            for (var i = 0; i < data.length; i++) {
                innerText += "<h5>" + data[i] + "</h5>"
            }
            $("#ajaxH5").html(innerText);
        }
    }

    $("#wechatQr").click(function () {
        var imgUrl = $.httpStaticPath() + "common/img/qr/wechatQr_test.png";
        var text = '<img style="border-radius:0" src="' + imgUrl + '">'
        $(".mask_layer").append(createAlert(text)).removeClass('none');
    })
    $("#appQr").click(function () {
        var imgUrl = $.httpStaticPath() + "common/img/qr/appQr_mini_12.jpg";
        var text = '<img style="border-radius:0" src="' + imgUrl + '">'
        $(".mask_layer").append(createAlert(text)).removeClass('none');
    })
    $(".mask_layer").click(function () {
        $(".mask_layer, .mask_layer > div").addClass('none');
    })

    function createAlert(data) {
        var op = '<div class="alert-box-with-btn">';
        op += data;
        op += '</div>'
        return op;
    }
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="js/weixin.js"></script>
<script type="text/javascript">

    getSignature([], function () {
        shareMobileGroup("${fromUser}");
    })
</script>
</body>
</html>